<template>
	<view class="adv-box u-m-y-10 u-m-x-20">
	
	 
	 <view class="type1 u-flex" >
			<image class="type1-img u-m-r-10" @tap="jump(advList[0].path)" :src="advList[0].img" mode="aspectFill"></image>
			<image class="type1-img" @tap="jump(advList[1].path)" :src="advList[1].img" mode="aspectFill"></image>
		</view> 
		<view class="type1 u-flex" style="margin-top: 10rpx;">
			<image class="type1-img u-m-r-10" @tap="jump(advList[2].path)" :src="advList[2].img" mode="aspectFill"></image>
			<image class="type1-img" @tap="jump(advList[3].path)" :src="advList[3].img" mode="aspectFill"></image>
		</view> 
		 
	 
 
		 
	</view>
</template>

<script>
/**
 * 自定义之广告魔方
 * @property {Object} detail -广告魔方信息
 */
export default {
	components: {},
	data() {
		return {
			advList:this.detail.list // adv数据
		};
	},
	props: {
		detail: {}
	},
	computed: {},
	created() {},
	methods: {
		// 路由跳转
		jump(path) {
			if(path.indexOf("/detail/1")!=-1){
				this.$Router.push({
						path: "pages/theme/theme",
						id: 1
					});
				}
			if(path.indexOf("/detail/1")!=-2){
				this.$Router.push({
						path: "pages/theme/theme2",
						id: 2
					});
				}
			}
			
	}
};
</script>

<style lang="scss">
@mixin grid($row: 1) {
	width: (710 - ($row - 1) * 10) / $row + rpx;
	border-radius: 10rpx;
}
.adv-box {
	.type1 {
		.type1-img {
			@include grid(2);
			height: 220rpx;
		}
	}

	.type2 {
		.type2-img1 {
			height: 350rpx;
			@include grid(2);
		}
		.type2-box {
			height: 350rpx;
			@include grid(2);
			.type2-img2 {
				height: 170rpx;
				@include grid(2);
			}
		}
	}

	.type3 {
		.type3-box {
			height: 350rpx;
			@include grid(2);
			.type3-img1 {
				height: 170rpx;
				@include grid(2);
			}
		}

		.type3-img2 {
			height: 350rpx;
			@include grid(2);
		}
	}

	.type4 {
		.type4-box {
			.type4-img1 {
				height: 170rpx;
				@include grid(2);
			}
		}

		.type4-img2 {
			@include grid(1);
			height: 220rpx;
		}
	}

	.type5 {
		.type5-img1 {
			@include grid(1);
			height: 220rpx;
		}

		.type5-box {
			.type5-img2 {
				height: 170rpx;
				@include grid(2);
			}
		}
	}

	.type6 {
		.type6-box1 {
			.type6-img1 {
				height: 170rpx;
				@include grid(2);
			}
		}

		.type6-box2 {
			.type6-img2 {
				height: 170rpx;
				@include grid(3);
			}
		}
	}
}
</style>
